<template>
  <view class="register-container">
    <view class="wave-box">
      <view class="wave wave-1"></view>
      <view class="wave wave-2"></view>
    </view>
    
    <view class="content">
      <view class="header">
        <text class="title">创建账号</text>
      </view>
      
      <view class="form-section">
        <view class="input-group">
          <uni-icons type="email" size="24" color="#36D1DC"></uni-icons>
          <input 
            type="text" 
            v-model="registerForm.email" 
            placeholder="请输入邮箱"
            class="input"
          />
        </view>
        
        <view class="input-group verification">
          <uni-icons type="chat" size="24" color="#36D1DC"></uni-icons>
          <input 
            type="text" 
            v-model="registerForm.code" 
            placeholder="请输入验证码"
            class="input"
            maxlength="6"
          />
          <button 
            class="verify-btn" 
            :class="{ 'disabled': counting > 0 || loading }"
            :disabled="counting > 0 || loading"
            @tap="handleSendCode"
          >
            {{ loading ? '发送中...' : (counting > 0 ? `${counting}s` : '获取验证码') }}
          </button>
        </view>
        
        <view class="input-group">
          <uni-icons type="locked" size="24" color="#36D1DC"></uni-icons>
          <input 
            type="password" 
            v-model="registerForm.password" 
            placeholder="请设置密码"
            class="input"
          />
        </view>
        
        <view class="input-group">
          <uni-icons type="locked" size="24" color="#36D1DC"></uni-icons>
          <input 
            type="password" 
            v-model="registerForm.confirmPassword" 
            placeholder="请确认密码"
            class="input"
          />
        </view>
        
        <button @tap="handleRegister" 
        class="register-btn" 
        hover-class="button-hover"
        :loading="registerLoading"
        >
          <text>注 册</text>
          <uni-icons type="right" size="16" color="#FFFFFF"></uni-icons>
        </button>
        
        <view class="login-link">
          已有账号？<text @tap="goToLogin">立即登录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import request from '@/utils/request'

const registerLoading = ref(false)

// 注册表单数据
const registerForm = reactive({
  email: '',
  code: '',
  password: '',
  confirmPassword: ''
})

// 验证码倒计时
const counting = ref(0)

// 添加 loading 状态
const loading = ref(false)

// 验证邮箱格式
const validateEmail = (email) => {
  const reg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
  return reg.test(email)
}

// 发送验证码
const handleSendCode = async () => {
  if (counting.value > 0 || loading.value) return
  
  if (!registerForm.email) {
    uni.showToast({
      title: '请输入邮箱',
      icon: 'none'
    })
    return
  }
  
  if (!validateEmail(registerForm.email)) {
    uni.showToast({
      title: '邮箱格式不正确',
      icon: 'none'
    })
    return
  }
  
  loading.value = true
  try {
    // 发送验证码请求
    await request.post('/register/sendEmailCode', {
      email: registerForm.email
    })
    
    // 开始倒计时
    counting.value = 60
    const timer = setInterval(() => {
      counting.value--
      if (counting.value <= 0) {
        clearInterval(timer)
      }
    }, 1000)
    
    uni.showToast({
      title: '验证码已发送',
      icon: 'success'
    })
  } catch (error) {
    uni.showToast({
      title: error || '发送失败',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

// 注册
const handleRegister = async () => {
  try{
    registerLoading.value = true
  // 表单验证
  if (!registerForm.email || !registerForm.code || !registerForm.password || !registerForm.confirmPassword) {
    uni.showToast({
      title: '请填写完整信息',
      icon: 'none'
    })
    return
  }
  
  if (!validateEmail(registerForm.email)) {
    uni.showToast({
      title: '邮箱格式不正确',
      icon: 'none'
    })
    return
  }
  
  if (registerForm.password.length < 6) {
    uni.showToast({
      title: '密码长度不能少于6位',
      icon: 'none'
    })
    return
  }
  
  if (registerForm.password !== registerForm.confirmPassword) {
    uni.showToast({
      title: '两次密码输入不一致',
      icon: 'none'
    })
    return
  }
  
    // 注册请求
    await request.post('/register', {
      email: registerForm.email,
      code: registerForm.code,
      password: registerForm.password
    })
    
    uni.showToast({
      title: '注册成功',
      icon: 'success'
    })
    
    // 注册成功后延迟跳转到登录页
    setTimeout(() => {
      uni.redirectTo({
        url: '/pages/login/login'
      })
    },50)
  } catch (error) {
    uni.showToast({
      title: error || '注册失败',
      icon: 'none'
    })
  } finally {
    registerLoading.value = false
  }
}

// 跳转到登录页
const goToLogin = () => {
  setTimeout(() => {
      uni.redirectTo({
        url: '/pages/login/login'
      })
    },50)
}
</script>

<style lang="scss" scoped>
.register-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f3ff 100%);
  position: relative;
  overflow: hidden;
}

.wave-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45vh;
  background: linear-gradient(135deg, #36D1DC 0%, #36D1DC 100%);
  border-radius: 0 0 50% 50%/0 0 100% 100%;
  transform: scaleX(1.5);
  
  .wave {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="white" fill-opacity="1" d="M0,32L48,37.3C96,43,192,53,288,80C384,107,480,149,576,144C672,139,768,85,864,69.3C960,53,1056,75,1152,90.7C1248,107,1344,117,1392,122.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') repeat-x;
    background-size: 1440px 100px;
    animation: wave 10s linear infinite;
    
    &.wave-1 {
      opacity: 0.3;
      animation-duration: 5s;
    }
    
    &.wave-2 {
      opacity: 0.6;
      animation-duration: 7s;
    }
  }
}

@keyframes wave {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-1440px);
  }
}

.content {
  position: relative;
  z-index: 1;
  padding: 60rpx;
}

.header {
  margin-top: 100rpx;
  text-align: center;
  
  .title {
    font-size: 48rpx;
    font-weight: 600;
    color: #fff;
    margin-bottom: 16rpx;
    text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
  }
  
}

.form-section {
  margin-top: 80rpx;
  padding: 60rpx 40rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 30rpx;
  box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10px);
  
  .input-group {
    position: relative;
    margin-bottom: 40rpx;
    
    :deep(.uni-icons) {
      position: absolute;
      left: 30rpx;
      top: 50%;
      transform: translateY(-50%);
    }
    
    .input {
      height: 100rpx;
      padding: 0 30rpx 0 90rpx;
      border-radius: 50rpx;
      background: #fff;
      font-size: 28rpx;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
      
      &:focus {
        box-shadow: 0 4rpx 20rpx rgba(110, 142, 251, 0.2);
      }
    }

    .input-code{
      margin-left: 0rpx;
    }
    
    &.verification {
      display: block;
      position: relative;
      
      .input {
        padding-right: 200rpx;
      }
      
      .verify-btn {
        position: absolute;
        right: 10rpx;
        top: 50%;
        transform: translateY(-50%);
        width: 180rpx;
        height: 60rpx;
        line-height: 60rpx;
        font-size: 24rpx;
        color: #36D1DC;
        background: #fff;
        border-radius: 30rpx;
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
        margin: 0;
        
        &.disabled {
          color: #999;
          background: #f5f5f5;
          pointer-events: none; // 禁用点击效果
        }
        
        &::after {
          border: none;
        }
      }
    }
  }
  
  .register-btn {
    width: 100%;
    height: 100rpx;
    margin-top: 60rpx;
    border-radius: 50rpx;
    background: linear-gradient(135deg, #36D1DC 0%, #36D1DC 100%);
    color: #fff;
    font-size: 32rpx;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    
    :deep(.uni-icons) {
      margin-left: 10rpx;
    }
    
    &.button-hover {
      transform: translateY(2rpx);
      box-shadow: 0 4rpx 8rpx rgba(110, 142, 251, 0.2);
    }
  }
  
  .login-link {
    margin-top: 40rpx;
    text-align: center;
    font-size: 26rpx;
    color: #666;
    
    text {
      color: #6e8efb;
      margin-left: 10rpx;
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        bottom: -4rpx;
        left: 0;
        width: 100%;
        height: 2rpx;
        background: #6e8efb;
        transform: scaleX(0);
        transition: transform 0.3s ease;
      }
      
      &:active::after {
        transform: scaleX(1);
      }
    }
  }
}
</style> 